<ng-form name="routeForm">
  <fieldset ng-disabled="routingDisabled">

    <!-- Name -->
    <div ng-show="showNameInput" class="form-group">
      <label for="route-name" class="required">Name</label>
      <!-- regex, maxlength from k8s.io/kubernetes/pkg/util/validation/validation.go -->
      <input
          id="route-name"
          class="form-control"
          type="text"
          name="name"
          ng-model="route.name"
          ng-required="showNameInput"
          ng-pattern="/^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/"
          ng-maxlength="63"
          ng-minlength="2"
          placeholder="my-route"
          select-on-focus
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
          aria-describedby="route-name-help">
      <div>
        <span id="route-name-help" class="help-block">A unique name for the route within the project.</span>
      </div>
      <div class="has-error" ng-show="routeForm.name.$error.pattern && routeForm.name.$touched && !routingDisabled">
        <span class="help-block">
          Route names may only contain lower-case letters, numbers, and dashes.
          They may not start or end with a dash.
        </span>
      </div>
    </div>

    <!-- Host -->
    <div class="form-group">
      <label for="host">Hostname</label>
      <!-- regex, maxlength from k8s.io/kubernetes/pkg/util/validation/validation.go -->
      <input
          id="host"
          class="form-control"
          type="text"
          name="host"
          ng-model="route.host"
          ng-pattern="/^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/"
          ng-maxlength="253"
          ng-readonly="hostReadOnly"
          placeholder="www.example.com"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
          aria-describedby="route-host-help">
      <div>
        <span id="route-host-help" class="help-block">
          Public hostname for the route.
          <span ng-if="!hostReadOnly">If not specified, a hostname is generated.</span>
          The hostname can't be changed after the route is created.
        </span>
      </div>
      <div class="has-error" ng-show="routeForm.host.$error.pattern && routeForm.host.$touched && !routingDisabled">
        <span class="help-block">
          Hostname must consist of lower-case letters, numbers, periods, and
          hyphens. It must start and end with a letter or number.
        </span>
      </div>
    </div>

    <!-- Path -->
    <div class="form-group">
      <label for="path">Path</label>
      <input
          id="path"
          class="form-control"
          type="text"
          name="path"
          ng-model="route.path"
          ng-pattern="/^\/.*$/"
          ng-disabled="route.tls.termination === 'passthrough'"
          placeholder="/"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
          aria-describedby="route-path-help">
      <div>
        <span id="route-path-help" class="help-block">
          Path that the router watches to route traffic to the service.
        </span>
      </div>
      <div class="has-error" ng-show="routeForm.path.$error.pattern && routeForm.path.$touched && !routingDisabled">
        <span class="help-block">
          Path must start with <code>/</code>
        </span>
      </div>
      <div class="has-warning" ng-show="route.path && route.tls.termination === 'passthrough'">
        <span class="help-block">
          Path value will not be used. Paths cannot be set for passthrough TLS.
        </span>
      </div>
    </div>

    <!-- Service -->
    <div ng-if="services">
      <osc-routing-service model="route.to"
                           services="services"
                           show-weight="route.alternateServices.length">
      </osc-routing-service>
    </div>

    <div ng-if="alternateServiceOptions.length && !route.alternateServices.length" class="form-group">
      <a href="" ng-click="addAlternateService()">Split traffic across multiple services</a>
    </div>

    <!-- Target Port -->
    <div ng-if="route.portOptions.length" class="form-group">
      <label for="routeTargetPort">Target Port</label>
      <select
          id="routeTargetPort"
          ng-if="route.portOptions.length"
          ng-model="route.targetPort"
          ng-options="portOption.port as portOption.label for portOption in route.portOptions"
          class="form-control"
          aria-describedby="target-port-help">
      </select>
      <div>
        <span id="target-port-help" class="help-block">
          Target port for traffic.
        </span>
      </div>
    </div>

    <!-- Alternate Services for A/B Traffic -->
    <div ng-if="route.alternateServices.length">
      <h3>Alternate Services</h3>
      <div ng-repeat="alternate in route.alternateServices" class="form-group">
        <osc-routing-service model="alternate"
                             services="alternateServiceOptions"
                             is-alternate="true"
                             show-weight="true">
        </osc-routing-service>
        <a href="" ng-click="route.alternateServices.splice($index, 1)">Remove service</a>
        <span ng-if="$last && route.alternateServices.length < alternateServiceOptions.length">
          <span class="action-divider">|</span>
          <a href="" ng-click="addAlternateService()">Add another service</a>
        </span>
      </div>
      <div ng-repeat="duplicate in duplicateServices" class="has-error mar-bottom-lg">
        <span class="help-block">
          Service {{duplicate.metadata.name}} cannot be added twice.
        </span>
      </div>
    </div>

    <div>
      <a href=""
        ng-click="showSecureRouteOptions = true"
        ng-show="!showSecureRouteOptions">Show options for secured routes</a>
    </div>

    <div ng-show="showSecureRouteOptions">
      <h3>Route Type</h3>
      <div>
        <span class="help-block">
          Routes can be secured using several TLS termination types for serving certificates.
        </span>
      </div>

      <!-- TLS Termination -->
      <div class="form-group">
        <label>TLS Termination</label>
        <select ng-model="route.tls.termination" class="form-control">
          <option value="">None</option>
          <option value="edge">Edge</option>
          <option value="passthrough">Passthrough</option>
          <option value="reencrypt">Re-encrypt</option>
        </select>
        <div class="learn-more-block help-block">
          <a href="{{'route-types' | helpLink}}" target="_blank">Learn more <i class="fa fa-external-link"></i></a>
        </div>
      </div>

      <!-- Insecure Edge Termination Policy -->
      <div class="form-group">
        <label>Insecure Traffic</label>
        <select
            ng-model="route.tls.insecureEdgeTerminationPolicy"
            ng-disabled="route.tls.termination !== 'edge'"
            class="form-control"
            aria-describedby="route-insecure-policy-help">
          <option value="">None</option>
          <option value="Allow">Allow</option>
          <option value="Redirect">Redirect</option>
        </select>
        <div>
          <span id="route-insecure-policy-help" class="help-block">
            Policy for traffic on insecure schemes like HTTP for edge termination.
          </span>
        </div>
      </div>

      <!-- Key and Certificates -->
      <h3>Certificates</h3>
      <div>
        <span class="help-block">
          TLS certificates for edge and re-encrypt termination. If not
          specified, the router's default certificate is used.
        </span>
      </div>
      <div ng-if="showCertificatesNotUsedWarning" class="has-warning">
        <span class="help-block">
          The certificate or key you've set will not be used.
          <span ng-if="!route.tls.termination">
            The route is unsecured.
          </span>
          <span ng-if="route.tls.termination === 'passthrough'">
            Custom certificates cannot be used with passthrough termination.
          </span>
        </span>
      </div>
      <fieldset>
        <div>
          <div class="form-group" id="certificate-file">
            <label>Certificate</label>
            <osc-file-input
              model="route.tls.certificate"
              drop-zone-id="certificate-file"
              show-values="true"
              help-text="The PEM format certificate. Upload file by dragging & dropping, or selecting it."
              ng-disabled="disableCertificateInputs()">
            </osc-file-input>
          </div>
          <div class="form-group" id="private-key-file">
            <label>Private Key</label>
            <osc-file-input
              model="route.tls.key"
              drop-zone-id="private-key-file"
              show-values="true"
              help-text="The PEM format key. Upload file by dragging & dropping, or selecting it."
              ng-disabled="disableCertificateInputs()">
          </osc-file-input>
          </div>
          <div class="form-group" id="ca-certificate-file">
            <label>CA Certificate</label>
            <osc-file-input
              model="route.tls.caCertificate"
              drop-zone-id="ca-certificate-file"
              show-values="true"
              help-text="The PEM format CA certificate. Upload file by dragging & dropping, or selecting it."
              ng-disabled="disableCertificateInputs()">
            </osc-file-input>
          </div>
          <div class="form-group" id="dest-ca-certificate-file">
            <label>Destination CA Certificate</label>
            <osc-file-input
                model="route.tls.destinationCACertificate"
                show-values="true"
                drop-zone-id="dest-ca-certificate-file"
                help-text="The PEM format CA certificate to validate the endpoint certificate for re-encrypt termination. Upload file by dragging & dropping, or selecting it."
                ng-disabled="route.tls.termination !== 'reencrypt'">
            </osc-file-input>
            <!-- Show a warning if the value won't be used, but only if we're
                 not already showing the generic certificate warning above. -->
            <div ng-if="route.tls.destinationCACertificate && route.tls.termination !== 'reencrypt' && !showCertificatesNotUsedWarning" class="has-warning">
              <span class="help-block">
                The destination CA certificate will not be used. Destination CA
                certificates are only used for re-encrypt termination.
              </span>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
  </fieldset>
</ng-form>
